<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复登录状态 - 调试工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        success: '#67C23A',
                        warning: '#E6A23C',
                        danger: '#F56C6C',
                        info: '#909399'
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen p-4 md:p-8 flex flex-col items-center">
    <div class="w-full max-w-2xl">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">登录状态修复工具</h1>
        
        <!-- 状态概览 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-4">当前登录状态</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-600 mb-1">是否存在用户信息:</p>
                    <p id="hasUserInfo" class="font-medium">检查中...</p>
                </div>
                <div class="p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-600 mb-1">是否存在Token:</p>
                    <p id="hasToken" class="font-medium">检查中...</p>
                </div>
            </div>
        </div>
        
        <!-- 用户信息查看器 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-4">当前用户信息</h2>
            <pre id="userInfoDisplay" class="bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm whitespace-pre-wrap">加载中...</pre>
        </div>
        
        <!-- 快速修复工具 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-4">快速修复</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <button id="setAdminBtn" class="px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow flex items-center justify-center text-lg">
                    设置管理员账号
                </button>
                <button id="clearAllBtn" class="px-4 py-3 bg-danger text-white rounded-lg hover:bg-danger/90 transition-all shadow flex items-center justify-center text-lg">
                    清除所有登录数据
                </button>
            </div>
        </div>
        
        <!-- 自定义用户信息 -->
        <div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-4">自定义用户信息</h2>
            <div class="mb-4">
                <label for="customUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名:</label>
                <input type="text" id="customUsername" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="输入用户名">
            </div>
            <div class="mb-4">
                <label for="customRoles" class="block text-sm font-medium text-gray-700 mb-1">角色 (逗号分隔):</label>
                <input type="text" id="customRoles" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="例如: admin,user">
            </div>
            <button id="setCustomUserBtn" class="w-full px-4 py-3 bg-success text-white rounded-lg hover:bg-success/90 transition-all shadow">
                设置自定义用户信息
            </button>
        </div>
        
        <!-- 操作反馈 -->
        <div id="feedback" class="mt-6 p-4 rounded-lg hidden"></div>
    </div>
    
    <script>
        // 存储键名常量
        const USER_INFO_KEY = 'userInfo';
        const TOKEN_KEY = 'token';
        
        // DOM 元素
        const hasUserInfoEl = document.getElementById('hasUserInfo');
        const hasTokenEl = document.getElementById('hasToken');
        const userInfoDisplayEl = document.getElementById('userInfoDisplay');
        const setAdminBtn = document.getElementById('setAdminBtn');
        const clearAllBtn = document.getElementById('clearAllBtn');
        const setCustomUserBtn = document.getElementById('setCustomUserBtn');
        const customUsernameInput = document.getElementById('customUsername');
        const customRolesInput = document.getElementById('customRoles');
        const feedbackEl = document.getElementById('feedback');
        
        // 加载并显示当前用户信息
        function loadAndDisplayUserInfo() {
            // 检查用户信息
            const userInfoJson = localStorage.getItem(USER_INFO_KEY);
            const hasUserInfo = !!userInfoJson;
            hasUserInfoEl.textContent = hasUserInfo ? '✓ 存在' : '✗ 不存在';
            hasUserInfoEl.className = hasUserInfo ? 'font-medium text-success' : 'font-medium text-danger';
            
            // 检查Token
            const token = localStorage.getItem(TOKEN_KEY);
            const hasToken = !!token;
            hasTokenEl.textContent = hasToken ? '✓ 存在' : '✗ 不存在';
            hasTokenEl.className = hasToken ? 'font-medium text-success' : 'font-medium text-danger';
            
            // 显示用户信息详情
            if (hasUserInfo) {
                try {
                    const userInfo = JSON.parse(userInfoJson);
                    userInfoDisplayEl.textContent = JSON.stringify(userInfo, null, 2);
                } catch (e) {
                    userInfoDisplayEl.textContent = '用户信息格式错误: ' + e.message;
                    userInfoDisplayEl.className = 'bg-red-50 text-danger p-4 rounded-lg overflow-x-auto text-sm';
                }
            } else {
                userInfoDisplayEl.textContent = '未找到用户信息';
                userInfoDisplayEl.className = 'bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm';
            }
        }
        
        // 显示反馈信息
        function showFeedback(message, isSuccess = true) {
            feedbackEl.textContent = message;
            feedbackEl.className = `mt-6 p-4 rounded-lg ${isSuccess ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'}`;
            feedbackEl.classList.remove('hidden');
            
            // 3秒后自动隐藏
            setTimeout(() => {
                feedbackEl.classList.add('hidden');
            }, 3000);
        }
        
        // 设置管理员用户信息
        function setAdminUserInfo() {
            const adminUserInfo = {
                id: '1',
                realName: 'admin',
                username: 'admin',
                avatar: '',
                roles: ['admin'],
                permissions: ['*:*:*'],
                department: '管理员',
                email: 'admin@example.com',
                mobile: '13800138000',
                status: '0',
                createTime: new Date().toISOString(),
                updateTime: new Date().toISOString()
            };
            
            // 设置用户信息到localStorage
            localStorage.setItem(USER_INFO_KEY, JSON.stringify(adminUserInfo));
            
            // 创建一个模拟token
            const mockToken = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhZG1pbiIsImlhdCI6MTcxNzY1OTAwMCwiZXhwIjoxNzE4MjY0ODAwfQ.' + Math.random().toString(36).substr(2);
            localStorage.setItem(TOKEN_KEY, mockToken);
            
            // 重新加载并显示用户信息
            loadAndDisplayUserInfo();
            
            // 显示成功反馈
            showFeedback('管理员账号已成功设置！请刷新页面查看效果。');
        }
        
        // 清除所有登录数据
        function clearAllLoginData() {
            if (confirm('确定要清除所有登录数据吗？这将登出当前用户。')) {
                localStorage.removeItem(USER_INFO_KEY);
                localStorage.removeItem(TOKEN_KEY);
                
                // 重新加载并显示用户信息
                loadAndDisplayUserInfo();
                
                // 显示成功反馈
                showFeedback('所有登录数据已清除！', false);
            }
        }
        
        // 设置自定义用户信息
        function setCustomUserInfo() {
            const username = customUsernameInput.value.trim();
            const rolesInput = customRolesInput.value.trim();
            
            if (!username) {
                showFeedback('用户名不能为空！', false);
                return;
            }
            
            // 处理角色列表
            const roles = rolesInput ? rolesInput.split(',').map(role => role.trim()) : [];
            
            const customUserInfo = {
                id: Math.random().toString(36).substr(2, 9),
                realName: username,
                username: username,
                avatar: '',
                roles: roles,
                permissions: roles.includes('admin') ? ['*:*:*'] : [],
                department: '用户',
                email: username.toLowerCase() + '@example.com',
                mobile: '13800138' + Math.floor(Math.random() * 1000),
                status: '0',
                createTime: new Date().toISOString(),
                updateTime: new Date().toISOString()
            };
            
            // 设置用户信息到localStorage
            localStorage.setItem(USER_INFO_KEY, JSON.stringify(customUserInfo));
            
            // 如果不存在token，创建一个模拟token
            if (!localStorage.getItem(TOKEN_KEY)) {
                const mockToken = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ' + username + 'IiwiaWF0IjoxNzE3NjU5MDAwLCJleHAiOjE3MTgyNjQ4MDB9.' + Math.random().toString(36).substr(2);
                localStorage.setItem(TOKEN_KEY, mockToken);
            }
            
            // 重新加载并显示用户信息
            loadAndDisplayUserInfo();
            
            // 显示成功反馈
            showFeedback('自定义用户信息已成功设置！请刷新页面查看效果。');
        }
        
        // 添加事件监听器
        setAdminBtn.addEventListener('click', setAdminUserInfo);
        clearAllBtn.addEventListener('click', clearAllLoginData);
        setCustomUserBtn.addEventListener('click', setCustomUserInfo);
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', loadAndDisplayUserInfo);
    </script>
</body>
</html>